<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /*.outer {*/
    /*    width: 200px;*/
    /*    height: 200px;*/
    /*    background-color: #7c83fd;*/
    /*    position: absolute;*/
    /*    left: 50%;*/
    /*    top: 50%;*/
    /*    transform: translate(-50%,-50%);*/
    /*}*/
    /*.outer {*/
    /*    width: 200px;*/
    /*    height: 200px;*/
    /*    background-color: #7c83fd;*/
    /*    position: absolute;*/
    /*    left: 50%;*/
    /*    top: 50%;*/
    /*    margin-left: -100px;*/
    /*    margin-top: -100px;*/
    /*}*/
    body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .outer{
        width: 200px;
        height: 200px;
        background-color: #7c83fd;
    }
</style>
<body>
<div class="outer"></div>
</body>
</html>
